<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model.number="message1" placeholder="edit me">
        <input type="text" v-model.trim="message2" placeholder="edit me">
        <input type="text" v-model.lazy="message3" placeholder="edit me">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>

    /*
        number:将输入内容尽可能的转为数字
        trim:将输入内容前后去空格
        lazy:懒加载 在用户实时输入时不会修改data中的数据
                当光标类型输入框或者按enter键再修改data中的数据
    */

    new Vue({
       el:"#app",
       data:{
           message1:"",
           message2:"",
           message3:""
       }
    })
</script>
</html>